<template>
  <div :class="$style.container">
    <dl :class="$style.title">
      <dt :class="type === '' ? $style.active: ''">全部电影</dt>
      <dd 
        v-for="item in titles" 
        :key="item" 
        :class="type === item ? $style.active: ''"
        @mouseover="mouseover(item)">{{ item }}</dd>
    </dl>
    <ul v-if="films.length > 6" >
      <li
        v-for="item in films.slice(0,6)"
        :class="$style.item"
        :key="item.original_title"
        @click.stop="handleItemClick(item)"
      >
        <div :class="$style.imgBox">
          <img 
            v-lazy="item.poster" 
            :class="$style.img"
            :alt="item.original_title">
          <span :class="['iconfont','icon-videofill',$style.videoIcon]"/>
        </div>
        
        <div :class="$style.bottom">
          <span :class="$style.name">{{ item.original_title }}</span>
          <el-button 
            v-if="item.price && !item.isMyFilm" 
            size="mini" 
          >立即购买</el-button>
          <el-button v-if="item.price && item.isMyFilm">已购买</el-button>
        </div>
        <div :class="$style.bottom">
          <span :class="$style.rate">评分:{{ item.rate }}</span>
          <span 
            v-if="item.price" 
            :class="$style.price">
            <small>￥<strong>{{ item.price }}</strong></small>
          </span>
          <span 
            v-else 
            :class="$style.price">免费</span>
        </div>
      </li >
    </ul>
  </div>
</template>
<script>
import http from '../../APIService/http'
export default {
  props: {
    lists: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      type: '',
      titles: ['喜剧', '犯罪', '爱情', '剧情', '动作', '科幻', '奇幻']
    }
  },
  computed: {
    films() {
      if (this.type === '') {
        return this.lists.length > 0 && this.lists[0].lists
      }
      let data = this.lists.filter(item => item.type === this.type)[0].lists
      return data
    }
  },
  methods: {
    mouseover(item) {
      this.type = item
    },
    /**
     * 跳转详情页
     */
    handleItemClick(item) {
      if (item.price && !item.isMyFilm) {
        this.handleBuyClick(item)
      } else {
        this.$router.push({
          path: '/detail',
          query: { id: item.doubanId }
        })
      }
    },
    /**
     * 立即购买
     */
    async handleBuyClick(item) {
      try {
        let token = this.$cookiz.get(this.$api.token)
        if (!token) {
          this.$store.commit('SET_SHOW', true)
          return false
        }
        let params = {
          id: item.doubanId
        }
        let res = await http.post(`/cart/addCart?token=${token}`, params)
        if (res.code === 0) {
          this.$router.push({
            path: '/cart'
          })
        }
      } catch (err) {
        throw err
      }
    }
  }
}
</script> 
<style lang="scss" module>
.container {
  margin-top: 30px;
  .title {
    background-color: rgb(190, 164, 116);
    background-image: linear-gradient(
      to right,
      rgb(194, 176, 142) 3%,
      rgb(190, 164, 116) 100%
    );
    width: 100%;
    height: 44px;
    line-height: 44px;
    box-sizing: border-box;
    font-size: 14px;
    color: #fff;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    &:after {
      display: block;
      content: ' ';
      overflow: hidden;
      clear: both;
    }
    dt,
    dd {
      float: left;
      font-size: 18px;
      margin-left: 13px;
      margin-right: 10px;
    }
    .active {
      &:after {
        position: relative;
        top: -3px;
        margin: 0 auto;
        display: block;
        content: ' ';
        overflow: hidden;
        height: 5px;
        width: 5px;
        border: 1px solid #fff;
        background: #fff;
        transform: rotate(45deg);
      }
    }
  }
  ul {
    padding: 10px 0px;
    overflow: hidden;
    width: 100%;
    list-style: none;
    background: #fff;
    .item {
      position: relative;
      float: left;
      width: 33.33%;
      padding: 10px;
      box-sizing: border-box;
      background: #fff;
      transition: background-color 0.5s;
      &:hover {
        background: #f4f4f4;
      }
      .imgBox {
        position: relative;
        width: 100%;
        height: 300px;
        img {
          width: 100%;
          height: 300px;
          object-fit: cover;
          border-radius: 4px;
        }
        .videoIcon {
          font-size: 0px;
        }
        &:hover {
          .videoIcon {
            position: absolute;
            left: 50%;
            top: 50%;
            font-size: 50px;
            color: #fff;
            transform: translate(-50%, -50%);
            border-radius: 50%;
          }
        }
      }
      .bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .rate {
          font-size: 14px;
          color: #999;
          line-height: 18px;
          height: 18px;
          margin-bottom: 7px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .price {
          font-size: 22px;
          color: #be9e4d;
          margin-right: 6px;
          letter-spacing: -0.8px;
          cursor: pointer;
          small {
            font-size: 12px;
            color: #f01414;
            strong {
              font-size: 16px;
            }
          }
        }
        .name {
          padding-top: 20px;
          font-size: 16px;
          color: #222;
          height: 22px;
          line-height: 22px;
          margin-bottom: 8px;
          font-weight: 500;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          cursor: pointer;
        }
        button {
          background: #f20d0d;
          font-size: 12px;
          font-weight: 400;
          color: #fff;
          &:hover,
          &focus {
            color: #fff;
            border-color: #f20d0d;
            background-color: #f20d0d;
          }
        }
      }
    }
  }
}
</style>
